<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;}
        .box{margin: 0 auto}
    </style>
</head>
<body>
<div class="box">

</div>
<script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
<script src="tz-waterfall.js"></script>
<script>
    $(".box").waterFall({
        imgUrlPrefix:"./img/", //图片url前缀，默认为空
        boxWidth : "95%",    //容器宽度，默认为95%，可为百分比或px
        columnWidth : "140px",   //每列宽度，默认为25%，可为百分比或px
        spacing : "5px",       //图片间距，默认为5px
        random : true,         //随机加载数组内的图片，默认为false
        imgUrl : [             //图片数组
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.gif","02.gif","03.gif","04.gif","05.gif",
            "06.gif","07.gif","08.gif","09.gif","10.gif",
            "11.gif","12.gif","13.gif","14.gif","15.gif",
            "16.gif","17.gif","18.gif","19.gif","20.gif",
            "21.gif","22.gif","23.gif","24.gif","25.gif",
            "26.gif","27.gif","28.gif","29.gif","30.gif",
            "31.gif","32.gif","33.gif","34.gif","35.gif",
            "36.gif","37.gif","38.gif","39.gif","40.gif",
            "41.gif","42.gif","43.gif","44.gif","45.gif",
            "46.gif","47.gif","48.gif","49.gif","50.gif",
            "51.gif","52.gif","53.gif","54.gif",

            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.jpg","02.jpg","03.jpg","04.jpg","05.jpg",
            "01.gif","02.gif","03.gif","04.gif","05.gif",
            "06.gif","07.gif","08.gif","09.gif","10.gif",
            "11.gif","12.gif","13.gif","14.gif","15.gif",
            "16.gif","17.gif","18.gif","19.gif","20.gif",
            "21.gif","22.gif","23.gif","24.gif","25.gif",
            "26.gif","27.gif","28.gif","29.gif","30.gif",
            "31.gif","32.gif","33.gif","34.gif","35.gif",
            "36.gif","37.gif","38.gif","39.gif","40.gif",
            "41.gif","42.gif","43.gif","44.gif","45.gif",
            "46.gif","47.gif","48.gif","49.gif","50.gif",
            "51.gif","52.gif","53.gif","54.gif"
        ]
    });
</script>
</body>
</html>